/*!
 *
 * Copyright (c) 2019, zhang jianchun.
 * Released under the MIT License.
 */


class mycanvas {
    constructor() {
        this.canvas = document.createElement("canvas");
        this.ctx = this.canvas.getContext('2d');

        console.log(this.canvas)
        this.stream = []
    }
    init() {
        this.canvas.width = w
        this.canvas.height = h

    }
    toDataURL() {
        return this.canvas.toDataURL("image/png");
        // this.canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG 质量为95%
    }
    getImageData(x, y, w = this.canvas.width, h = canvas.height) {
        return this.ctx.getImageData(x, y, w, h)
    }
    putImageData(imageData, x, y) {
        return this.ctx.putImageData(imageData, x, y);
    }
    getStream() {
        return this.stream = this.canvas.captureStream();
    }
    drawVideo(video, x, y, w, h) {
        this.ctx.drawImage(video, x, y, w, h);
    }
    addvideo(video, x, y, w, h) {
        this.canvas.width = w
        this.canvas.height = h

        this.ctx.drawImage(video, x, y, w, h);
    }
    addvideoStream(video, x, y, w, h, video2, x2, y2, w2, h2) {

        console.log(video, x, y, w, h)


        // video.ontimeupdate = () => {
        this.ctx.drawImage(video, x, y, w, h);
        this.ctx.drawImage(video2, x2, y2, w2, h2);
        // }
        video.onpause = () => {
            console.log(`
         当音频/视频已暂停时触发。
         `)
        }

        function draw() {}
        return this.stream = this.canvas.captureStream();
        // return this.canvas.toDataURL("image/png");
    }
    addvideoStream2() {}
    videoStreamstop() {
        console.log(this.stream)
        this.stream.getTracks().forEach(track => {
            track.stop();
        });
    }
    draw(canvas) {
        // var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var raf;
        var running = false;

        var ball = {
            x: 100,
            y: 100,
            vx: 5,
            vy: 1,
            radius: 25,
            color: 'blue',
            draw: function() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
                ctx.closePath();
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        };

        function clear() {
            ctx.fillStyle = 'rgba(255,255,255,0.3)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

        function draw() {
            clear();
            ball.draw();
            ball.x += ball.vx;
            ball.y += ball.vy;

            if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
                ball.vy = -ball.vy;
            }
            if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
                ball.vx = -ball.vx;
            }

            raf = window.requestAnimationFrame(draw);
        }

        canvas.addEventListener('click', function(e) {
            if (!running) {
                raf = window.requestAnimationFrame(draw);
                running = true;
            } else {
                window.cancelAnimationFrame(raf);
                running = false;
            }
        });

        ball.draw();
    }
}